<template>


  <el-drawer
    :visible.sync="visible"
    :title="title"
    :modal-append-to-body="true"
    :append-to-body="true"
    :destroy-on-close="false"
    :modal="true"
    direction="rtl"
    :wrapperClosable="false"
    custom-class="form-drawer"
    size="650px"
    @closed="closed"
    >

  <div class="form-drawer__content" style="height: 100%;">

  <div style="height: 280px;">
    <el-form ref="formData" :model="formData" :rules="rules" >
      <el-form-item label-width="80px" label="场景名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入场景名称" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item label-width="80px" label="场景版本" prop="version">
        <el-input v-model="formData.version" placeholder="场景版本" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item label-width="80px" label="场景封面" prop="imageUrl">
        <el-image
          style="width: 200px; height: 150px"
          :src="imageUrl"
          fit="fit"></el-image>
      </el-form-item>
    </el-form>
  </div>

  <div style="padding: 10px;height:calc(100% - 105px);margin-top: 0px;">
    <div class="list-header" style="margin-bottom: 5px;">
      <el-row :gutter="20">
        <el-col :span="16"><div class="grid-content bg-purple">场景同步主机情况</div></el-col>
        <el-col :span="8">
        </el-col>
      </el-row>
    </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%;margin-top:5px;">
        <el-table-column
          prop="name"
          label="主机名称"
          >
        </el-table-column>

        <el-table-column
          prop="status"
          label="主机状态"
          width="80">

          <template slot-scope="scope">
            <el-tag v-if="scope.row.status=='1' "  type="success">运行中</el-tag>
            <el-tag v-else-if="scope.row.status=='0' "  type="danger">停止</el-tag>
            <el-tag v-else type="warning">未知</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="version"
          label="当前版本"
          >
          <template slot-scope="scope">
            <div v-if="scope.row.terminalScene">当前版本:{{scope.row.terminalScene.version }}(最新版本:{{scope.row.scene.version}})</div>
            <div>更新时间:{{scope.row.scene.updateTime | dateFormat }}</div>
            <div>文件大小:{{scope.row.scene.size}}</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="downLoadStatus"
          label="下载解压状态"
          width="120">
          <template slot-scope="scope">
            <span v-if=" scope.row.terminalScene  && scope.row.terminalScene.downLoadStatus=='0' "  >未下载</span>
            <span v-else-if="scope.row.terminalScene  &&  scope.row.terminalScene.downLoadStatus=='1' "  >下载中</span>
            <span v-else-if="scope.row.terminalScene  &&  scope.row.terminalScene.downLoadStatus=='2' "  >下载完成待解压</span>
            <span v-else-if="scope.row.terminalScene  &&  scope.row.terminalScene.downLoadStatus=='3' "  >完成</span>
            <span v-else type="warning">未知</span>
          </template>
        </el-table-column>
      </el-table>
  </div>


  </div>

  </el-drawer>
</template>




<script>
  import {
    saveScene,
    getSceneTypes,
    findScenePerms
  } from '@/api/biz/scene'

  import {
    saveProject,
  } from '@/api/biz/project'

  import {
    findTerminalProjectList,
  } from '@/api/biz/terminal'

  import {
    findUserList,
    saveUser,
    deleteUser
  } from '@/api/system/user'

  import {
    isOk
  } from '@/utils/request'

  export default {
    name: 'SynchDrawer',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.formData.id = value.data.id || ''
            this.formData.name = value.data.name || ''
            this.formData.size = value.data.size || 0
            this.formData.remark = value.data.remark || ''
            this.formData.exeFilePath = value.data.exeFilePath || ''
            this.formData.version = value.data.version || '0.0'
            this.updateTime = value.data.updateTime || ''

            if(value.data.id){
              this.imageUrl=process.env.VUE_APP_BASE_API+'/biz/scene/thumbnail/'+value.data.id
            }
          } else {
            this.formData.id =''
            this.formData.name = ''
            this.formData.size = 0
            this.formData.remark = ''
            this.formData.exeFilePath =''
            this.formData.version ='0.0'
            this.imageUrl=''
            this.updateTime =''
          }
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        visible:false,
        title:'场景同步',
        loading:false,
        formData: {
          id: '',
          name: '',
          size:0,
          version:24,
          exeFilePath:'',
          remark: '',
          file:null
        },
        tableData: [],
        queryForm: {
          keywords: undefined,
        },
        page: {
          cur: 1,
          limit: 50,
          total: 0
        },
        updateTime:null,
        imageUrl: '',
        options:[],
        rules: {
        }
      }
    },
    created() {
      this.load()
    },
    methods:{
      onQuerySubmit(event) {
        this.load()
      },
      onReset(event) {
        this.queryForm.keywords=undefined;
        this.load()
      },
      load(){
        this.loading=true
        findTerminalProjectList({
          sceneId: this.formData.id
        }).then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.result
            this.tableData = _data
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page.limit = val
        this.load()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page.cur = cur
        this.load()
      },
      handleChange(value) {
        const form={
          orgId:value.id,
          sceneId:this.formData.id,
          limit:value.limit,
          status:value.status
        }

        this.saveProject(form);
      },
      saveProject: function(form) {
        this.loading = true
        saveProject(form).then(rsp => {
          if(200==rsp.code){
            this.$message({
              type: 'success',
              message:rsp.message
            })
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      handleSyn(row){
        this.loading=true
        fetch(`http://${row.ip}:${row.port}/downloadFile`, {
            method: "POST",
            headers: { "Content-type": "application/json" },
            body: this.formData.id
        }).then(res => {
          if (!res.ok) { throw Error(res.statusText) }
          return res.json()
        }).then(json => {
          if(json.code==200 && json.result){
             this.load()
          }else{
          }
        }).catch((error) => {
          this.$message({
            type: 'error',
            message:error
          })
        }).finally(() => {
          this.loading = false
        });
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style scoped>

  .list-header{
    border-left: 5px solid #02a7f0;
    padding-left: 5px;
    line-height: 30px;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
  }

  .division{
    padding: 10px;
    border-top: 1px solid #aaaaaa;
    margin-top: -36px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }

  /deep/ .el-table{
   height:  calc(100% - 38px)  !important;
  }
  /deep/.el-table__body-wrapper {
      overflow: hidden;
      overflow-y: auto;
      position: relative;
      height: calc(100% - 55px);
  }
</style>
